import './ripple.js';
import {Theme} from './page.js';
import {JSXAttributes, useElement} from './core/element.js';

const name = 's-field';
const props = {
    allowFloat: true,
    labelFloat: true
};

const style = (): string => `
:host {
    --field-height: 40px;
    --field-padding: 16px;
    --field-border-width: 1px;
    --field-border-radius: 4px;
    --field-border-style: solid;
    --field-border-color: var(--s-color-outline, ${Theme.colorOutline});
    --field-border-float-width: 2px;
    --field-border-float-color: var(--s-color-primary, ${Theme.colorPrimary});
    display: block;
    width: 100%;
    flex-shrink: 0;
}

.container {
    width: 100%;
    box-sizing: border-box;
    padding: var(--field-padding);
}

.wrapper {
    width: 100%;
    min-height: var(--field-height);
    position: relative;
    box-sizing: border-box;
    display: flex;
    gap: calc(var(--field-padding) / 2);
}

.wrapper::before,
.wrapper::after {
    box-sizing: border-box;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: opacity .1s ease-out;
    border-width: var(--field-border-width);
    border-style: var(--field-border-style);
    border-color: var(--field-border-color);
    border-radius: var(--field-border-radius);
}

.wrapper::before {
    opacity: 1;
    border-width: var(--field-border-width);
    border-color: var(--field-border-color);
}

.wrapper::after {
    opacity: 0;
    border-width: var(--field-border-float-width);
    border-color: var(--field-border-float-color);
}

:host([label-float~=true]) .wrapper::before {
    opacity: 0;
}

:host([label-float~=true]) .wrapper::after {
    opacity: 1;
}

.wrapper .start,
.wrapper .end {
    flex-shrink: 0;
    height: 100%;
    min-width: var(--field-border-radius);
    position: relative;
}

.box {
    flex: 1;
    max-width: 100%;
    position: relative;
}

.legend {
    display: flex;
    pointer-events: none;
    min-height: 100%;
    height: 0;
    position: relative;
    top: 0;
}

:host([label-float~=true]) .legend {
    top: -100%;
}

.label {
    color: var(--field-border-color);
    position: relative;
    height: 100%;
}

::slotted([slot=label]) {
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: var(--field-border-color);
    transform: translateY(0) scale(1);
    transition: color .1s ease-out, transform .1s ease-out;
}

:host([label-float~=true]) ::slotted([slot=label]) {
    color: var(--field-border-float-color);
    transform: translateY(-50%) scale(0.875);
}

:host([label-float~=false]) ::slotted([slot=label]) {
    color: var(--field-border-color);
    transform: translateY(0) scale(1);
}

.left, .right {
    height: 0;
    width: var(--field-padding);
}

.right {
    flex-grow: 1;
}

.left::before,
.left::after,
.right::before,
.right::after {
    border-top-style: solid;
    left: var(--field-border-radius);
    width: calc(100% - var(--field-border-radius));
}

.right::before,
.right::after {
    left: 0;
}

::slotted([slot=start]) {

}

::slotted([slot=view]) {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--field-padding);
    min-height: var(--field-height);
    display: flex;
    align-items: center;
}

::slotted([slot=end]) {

}
`;

const template = () => `
<div class="container">
    <div class="wrapper">
        <slot name="start" class="start"></slot>
        <div class="box">
            <slot name="view"></slot>
            <div class="legend">
                <div class="left"></div>
                <slot name="label"></slot>
                <div class="right"></div>
            </div>
        </div>
        <slot name="end" class="end"></slot>
    </div>
</div>
`;

export class Field extends useElement({
    style: style(),
    template: template(),
    props,
    syncProps: true,
    setup() {
    }
}) {
}

Field.define(name);

declare global {
    namespace JSX {
        interface IntrinsicElements {
            [name]: Partial<typeof props> & JSXAttributes;
        }
    }

    interface HTMLElementTagNameMap {
        [name]: Field;
    }
}

//@ts-ignore
declare module 'vue' {
    export interface GlobalComponents {
        [name]: typeof props;
    }
}
